<script setup lang="ts">
const { animateOnScroll } = useScrollAnimation()

// 平台优势数据
const advantages = [
  {
    id: 1,
    title: '安全三网通道',
    subtitle: '云通讯产品',
    icon: 'lucide:shield-check',
    description: '接入移动、联通、电信三大运营商优质通道，确保消息送达率和稳定性',
    icon_url: '/home/platform/1.png'
  },
  {
    id: 2,
    title: '多流量套餐',
    subtitle: '物联网',
    icon: 'lucide:package',
    description: '提供灵活的流量套餐选择，满足不同场景的物联网连接需求',
    icon_url: '/home/platform/2.png'
  },
  {
    id: 3,
    title: '检测高效，覆盖面广',
    subtitle: '号码检测',
    icon: 'lucide:zap',
    description: '快速精准的号码检测服务，覆盖全国各地运营商号段',
    icon_url: '/home/platform/3.png'
  },
  {
    id: 4,
    title: '认证准确，数据可视化',
    subtitle: '实名认证',
    icon: 'lucide:check-circle',
    description: '对接权威数据源，认证结果准确可靠，提供可视化数据分析',
    icon_url: '/home/platform/4.png'
  },
  {
    id: 5,
    title: '安全防控，算法精准',
    subtitle: '业务风控',
    icon: 'lucide:lock',
    description: '采用先进的风控算法，多维度识别风险，保障业务安全',
    icon_url: '/home/platform/5.png'
  },
  {
    id: 6,
    title: '专业化运维',
    subtitle: 'IDC',
    icon: 'lucide:settings',
    description: '7×24小时专业运维服务，确保数据中心稳定运行',
    icon_url: '/home/platform/6.png'
  }
]
</script>

<template>
  <section class="py-16 md:py-24"  style="background: linear-gradient(to top left, #dde0ff, #ffffff)">
    <div class="mx-auto px-4 max-w-5xl">
      <!-- 标题和副标题 -->
      <div class="text-center mb-12 md:mb-16">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
          平台优势
        </h2>
        <p class="text-base md:text-lg text-gray-600">
          为什么选择迅达智讯
        </p>
      </div>

      <!-- 优势卡片网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
        <div
          v-for="(advantage, index) in advantages"
          :key="advantage.id"
          :ref="(el) => { if (el) animateOnScroll(el as HTMLElement, index * 100) }"
          class="bg-gradient-to-br from-blue-50 to-white rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-md transition-all border border-gray-100 group"
        >
          <!-- 图标 -->
          <div class="w-14 h-14 bg-[#315EFB] rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
            <!-- <Icon :name="advantage.icon" class="w-7 h-7 text-white" /> -->
            <img :src="advantage.icon_url" alt="优势图标" class="w-9 h-9 object-contain" />
          </div>

          <!-- 标题 -->
          <h3 class="text-xl font-bold text-gray-900 mb-2">
            {{ advantage.subtitle }} - {{ advantage.title }}
          </h3>

          <!-- 副标题 -->
          <!-- <p class="text-sm text-primary font-medium mb-4">
            {{ advantage.subtitle }}
          </p> -->

          <!-- 描述 -->
          <p class="text-sm text-gray-600 leading-relaxed">
            {{ advantage.description }}
          </p>
        </div>
      </div>
    </div>
  </section>
</template>